<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>RMC summary log</title>
        <!-- <script src="vue.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
        <style type="text/css">
        .app {
            width: 100em;
            margin: 0 auto;
            font-family: monospace;
            font-size: 1em;
        }
        .app-m {
            width: 100%;
            font-size: 8em;
        }
        button {
            font-family: monospace;
            font-size: 1em;
            color: white;
            background-color: #5F5F5F;
            width: 5em;
            padding: 0;
            margin: 0;
            border: 0;
        }
        input {
            font-family: monospace;
            font-size: 1em;
        }
        table.layout {
            border-collapse: collapse;
            margin: 0;
            border: 0;
            padding: 0;
            margin-top: 0.2em;
            margin-bottom: 0.2em;
        }
        table.layout tr, table.layout td {
            margin: 0;
            border: 0;
            padding: 0;
        }
        tr.id .button .id-text {
        }
        table.res td {
            padding-left: 0.3em;
            padding-right: 0.3em;
        }
        table.layout .button {
            margin: 0;
            border: 0;
            width: 3.5em;
            font-size: 1.0em;
            text-align: center;
        }
        .button:hover {
            background-color: #ff9800;
        }
        .on {
            background-color: #4CAF50;
        }
        .input {
            margin: 0;
            border: 0;
            padding: 0;
            width: 100%;
        }
        .input-text, .id-text {
            width: 50em;
            font-family: monospace;
            font-size: 1em;
            background-color: #DEDFF2;
            padding-top: 0.1em;
            padding-bottom: 0.1em;
            margin-top: 0.3em;
        }
        .file-input {
            margin-top: 0.5em;
            margin-bottom: 0em;
        }
        .ln {
            text-align: right;
            background-color: #F7F7F7;
            color: #999999;
        }
        #match {
            width: 6em;
        }
        #id-label {
            width: 6em;
            text-align: center;
            border: 0;
        }
        #key2-label {
            width: 6em;
            text-align: center;
            border: 0;
        }
        #max-lines {
            width: 5em;
            margin: 0;
            text-align: right;
        }
        #filtered_n {
            width: 3em;
            text-align: right;
        }
        h2 {
            text-align: center;
            margin: 0;
            border: 0;
            padding: 0;
            margin-top: 0.5em;
        }
        .n-text {
            width: 3em;
            text-align: right;
        }
        .txt {
            text-align: center;
        }

        </style>
    </head>
    <body>
        <div id="app" class="app">
            <h2>Simple RMC summary log filter</h2>
            Upload a RMC summary log <input class="file-input" type="file" @change="on_file_change">
            <table class="layout">
            <tr>
                <td>Lines</td>
                <td class="txt">from</td>
                <td><input class="n-text" type="text" v-model.number="from_n"></td>
                <td class="txt">to</td>
                <td><input class="n-text" type="text" v-model.number="to_n"></td>
                <td class="txt">of</td>
                <td><input disabled="true" class="n-text" type="text" v-model="log_lines.length"></td>
                <td><button class="button" @click="update_lines">Update</button></td>
            </tr>
            <tr>
                <td class="txt">Filtered</td>
                <td> <input type="text" disabled="true" id="filtered_n" v-model="filtered_n" /> </td>
            </tr>
                <tr>
                    <td>Show</td>
                    <td><button :class="['button', {on: show_ln}]" @click="show_ln = (show_ln == true) ? false : true" title="show line number">Line#</button></td>
                    <td><button :class="['button', {on: show_sect}]" @click="show_sect = (show_sect == true) ? false : true" title="show summary sect">Sect</button></td>
                    <td><button :class="['button', {on: show_subs}]" @click="show_subs = (show_subs == true) ? false : true" title="show summary subsect">SubS</button></td>
                    <td><button :class="['button', {on: show_non}]" @click="show_non = (show_non == true) ? false : true" title="show lines other than summary: timestamp, cycle count, etc.">Non-Sum</button></td>
                </tr>
                <tr>
                    <td>sect</td>
                    <td><button :class="['button', {on: sect_enable['all']}]" @click="sect_enable_all">{{ 'All' }}</button></td>
                    <td v-for="s1 in sect_list"><button :class="['button', {on: sect_enable[s1]}]" @click="sect_enable[s1] = (sect_enable[s1] == true) ? false : true">{{ s1 }}</button></td>
                </tr>
                <tr>
                    <td>subsect</td>
                    <td><button :class="['button', {on: subs_enable['all']}]" @click="subs_enable_all">{{ 'All' }}</button></td>
                    <td v-for="s2 in subs_list"><button :class="['button', {on: subs_enable[s2]}]" @click="subs_enable[s2] = (subs_enable[s2] == true) ? false : true">{{ s2 }}</button></td>
                </tr>
                <tr class="id" v-for="s in ids_show">
                    <template v-if="subs_enable[s] && ids[s].length != 0">
                    <td>{{ s }}</td>
                    <td><button :class="['button', {on: id_enable[s]['all']}]" @click="id_enable_all(s)">{{ 'All' }}</button></td>
                        <td v-for="i in ids[s]"><button :class="['button', {on: id_enable[s][i]}]" @click="id_enable[s][i] = (id_enable[s][i]) ? false : true">{{ i }}</button></td>
                    </template>
                </tr>
            </table>
            <button class="button" id="match" @click="match = (match) ? false : true" title="summary lines filter">{{ match ? 'Match' : 'Not Match'}}</button>
            <input class="input-text" type="text" v-model="filterkey" title="summary lines filter">
            <button class="button" @click="filterkey = ''">Clear</button>
            <template v-if="show_non">
                <br/>
                <input type="text" disabled="true" id="key2-label" value="Filter" title="non-summary lines filter" />
                <input class="input-text" type="text" v-model="filterkey2" title="non-summary lines filter">
                <button class="button" @click="filterkey2 = ''">Clear</button>
            </template>
            <hr>

            <table class="layout res">
                <tr v-for="line in filteredLines">
                    <td v-if="show_ln" class="ln"> {{ line.ln }} </td>
                    <td v-if="show_sect"> {{ line.s1 }} </td>
                    <td v-if="show_subs"> {{ line.s2 }} </td>
                    <!-- <td> {{ line.id }} </td> -->
                    <!-- <td> {{ line.v }} </td> -->
                    <td> {{ line.id }} {{ line.v }} </td>
                </tr>
            </table>
        </div>
    </body>
    <script type="text/javascript">
        var data = {
            sect_list: ['Asset', 'Status', 'Power', 'Temp'],
            sect_enable: {},
            subs_list: ['Node', 'PSU', 'Fan', 'Cooling', 'RMC', 'Power', ],
            subs_enable: {},
            ids: {},
            ids_show: ['Node', 'PSU', 'Fan', 'Cooling'],
            id_enable: {Node: {all: true}, PSU: {all: true}, Fan: {all: true}, Cooling: {all: true}},
            lines: [],
            filterkey: '',
            show_ln: true,
            show_sect: false,
            show_subs: false,
            match: true,
            filtered_n: 0,
            from_n: 1,
            to_n: 1000,
            log: '',
            show_non: true,
            filterkey2: 'cyc',
        };
        for (var i=0;i<data.sect_list.length;i++) {
            data.sect_enable[data.sect_list[i]] = true;
        }
        data.sect_enable['all'] = false;
        for (var i=0;i<data.subs_list.length;i++) {
            data.subs_enable[data.subs_list[i]] = true;
        }
        data.subs_enable['all'] = false;
        for (var i=0;i<data.ids_show.length;i++) {
            data.ids[data.ids_show[i]] = [];
        }

        var app = new Vue({
            el: '#app',
            data: data,
            computed: {
                filterkey_re: function() {
                    return new RegExp(this.filterkey,"i");
                },
                filterkey2_re: function() {
                    return new RegExp(this.filterkey2,"i");
                },
                filteredLines: function () {
                    var self = this;
                    var filteredLines = self.lines.filter(function (line) {
                        if (line.t == 0) {
                            if (self.show_non) {
                                return line.v.search(self.filterkey2_re) != -1;
                            } else {
                                return false;
                            }
                        }
                        var m = false;
                        if (self.sect_enable[line.s1] == false) {
                            m = false;
                        } else if (self.subs_enable[line.s2] == false) {
                            m = false;
                        } else if (self.ids_show.indexOf(line.s2) > -1 && self.id_enable[line.s2][line.id] == false) {
                            m = false;
                        } else {
                            m = line.v.search(self.filterkey_re) != -1;
                            m = self.match ? m : !m;
                        } 
                        return m;
                    })
                    self.filtered_n = filteredLines.length;
                    return filteredLines;
                },
                log_lines: function() {
                    if (this.log == '') {
                        return [];
                    } else {
                        return this.log.split("\n");
                    }
                }
            },
            methods: {
                sect_enable_all: function() {
                    this.sect_enable['all'] = (this.sect_enable['all'] == true) ? false : true;
                    for (var i=0;i<data.sect_list.length;i++) {
                        data.sect_enable[data.sect_list[i]] = data.sect_enable['all'];
                    }
                },
                subs_enable_all: function() {
                    this.subs_enable['all'] = (this.subs_enable['all'] == true) ? false : true;
                    for (var i=0;i<data.subs_list.length;i++) {
                        data.subs_enable[data.subs_list[i]] = data.subs_enable['all'];
                    }
                },
                id_enable_all: function(subs) {
                    this.id_enable[subs]['all'] = (this.id_enable[subs]['all'] == true) ? false : true;
                    for (var i=0;i<data.ids[subs].length;i++) {
                        data.id_enable[subs][data.ids[subs][i]] = data.id_enable[subs]['all'];
                    }
                },
                clear_lines: function() {
                    Vue.set(this, 'lines', []);
                },
                update_lines: function () {
                    if (!this.log) {
                        return;
                    }

                    this.clear_lines();

                    var lines = this.log_lines;
                    var a_line = '';
                    var sect_list = this.sect_list;
                    var subs_list = this.subs_list;
                    var sect = null;
                    var subs = null;
                    var head = [];
                    var value = [];
                    var max_n = lines.length;
                    var from_n = this.from_n <= max_n ? this.from_n : max_n;
                    var to_n = this.to_n <= max_n ? this.to_n : max_n;
                    var t = 0; // 0 for non-summary lines, 1 for summary lines
                    var ln = 0;
                    for (var lidx=from_n -1;lidx<to_n;lidx++) {
                        ln = lidx +1;
                        a_line = lines[lidx].trim();
                        if (a_line == '') {
                            this.lines.push({t: 0, ln: ln, s1: '', s2: '', id: '', v: a_line});
                            continue;
                        }
                        if (sect_list.indexOf(a_line) > -1) {
                            if (a_line == 'Power') {
                                if (sect == 'Power') {
                                    subs = a_line;
                                    subs_ln = ln;
                                } else {
                                    sect = a_line;
                                }
                            } else {
                                sect = a_line;
                            }
                            this.lines.push({t: 0, ln: ln, s1: '', s2: '', id: '', v: a_line});
                            continue;
                        }

                        if (subs_list.indexOf(a_line) > -1) {
                            subs = a_line;
                            subs_ln = ln;
                            this.lines.push({t: 0, ln: ln, s1: '', s2: '', id: '', v: a_line});
                            continue;
                        }

                        if (a_line == 'Verbs:') {
                            sect = null;
                            subs = null;
                            this.lines.push({t: 0, ln: ln, s1: '', s2: '', id: '', v: a_line});
                            continue;
                        }

                        if (!(sect && subs)) {
                            this.lines.push({t: 0, ln: ln, s1: '', s2: '', id: '', v: a_line});
                            continue;
                        }

                        if (ln == subs_ln +1) {
                            // head = a_line.replace(/\s+/g, ' ').trim().split(' ');
                            this.lines.push({t: 0, ln: ln, s1: '', s2: '', id: '', v: a_line});
                            continue;
                        }

                        // a_line has been trim, spaces are removed
                        // if (a_line[0] == ' ') {
                        //     a_line = 'NULL ' + a_line;
                        // }
                        value = a_line.replace(/\s+/g, ' ').trim().split(' ');

                        // for (var hidx=0;hidx<head.length;hidx++) {
                        //     this.lines.push({
                        //         ln: ln,
                        //         s1: sect,
                        //         s2: subs,
                        //         k: head[hidx],
                        //         v: value[hidx] ? value[hidx] : '',
                        //     });
                        // }
                        var id = value[0];
                        var m = false;
                        if (this.ids_show.indexOf(subs) > -1 && this.ids[subs].indexOf(id) < 0) {
                            if (subs == 'Node' && id.match(/^\d\d[AB]$/)) {
                                m = true;
                            } else if (subs == 'PSU' && id.match(/^[AB]\d$/)) {
                                m = true;
                            } else if (subs == 'Fan' && id.match(/^\d+$/)) {
                                m = true;
                            } else if (subs == 'Cooling' && id.match(/^\d+$/)) {
                                m = true;
                            }

                            if (m) {
                                this.ids[subs].push(id);
                                Vue.set(this.id_enable[subs], id, true);
                            }
                        }
                        this.lines.push({
                            t: 1,
                            ln: ln,
                            s1: sect,
                            s2: subs,
                            id: id,
                            v: value.slice(1).join(' ')
                        });
                    }
                }
            }
        });

        // page actions
        function on_file_change(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) {
                return;
            }
            parse_log_file(files[0]);
        }
        function parse_log_file(file) {
            var reader = new FileReader();

            reader.onload = (e) => {
                // data:application/octet-stream;base64,AQABBhEAAOcBBRfDICAgwNggICAgICAgICAgIC…AxMjM0NTY3ODkwwN4xMjM0NTY3ODkwMTIzNDU2Nzg5MDEyMzQ1Njc4OTDIICAgICAgICDAwa4=
                // data:text/plain;base64,MTIzNDUNCjIyMzQ1DQozMjM0NQ0K
                // var b = atob(e.target.result.split(';')[1].split(',')[1]);
                var res = e.target.result;
                var s = atob(res.slice(res.indexOf(',') +1));
                app.log = s;
                app.update_lines();
            };
            reader.readAsDataURL(file);
        }

        function init() {
            // document.getElementById("input").focus();
            app.sect_enable_all();
            app.subs_enable_all();
            app.sect_enable_all();
            app.subs_enable_all();
            data.sect_enable.Asset = true;
            data.subs_enable.Node = true;
        }

        init();

</script>
</html>